<template>
    <div class="login_main">
        <div class="login_box">
            <div style="display: flex;flex-direction: row;align-items: center">
                <img src="../assets/logo_color.svg" alt="" style="width: 60px">
                <span class="web_name">飞鱼客栈</span>
            </div>
            <el-input  v-model="userInfo.name" type="text" clearable placeholder="用户名">
                <template #prefix><i class="iconfont icon-adduser icon" /></template>
            </el-input>
            <el-input v-model="userInfo.email" type="text" clearable placeholder="邮箱">
                <template #prefix><i class="iconfont icon-mail icon" /></template>
            </el-input>
            <el-input v-model="userInfo.password" type="password" show-password placeholder="登录密码">
                <template #prefix><i class="iconfont icon-password icon" /></template>
            </el-input>
            <el-input v-model="userInfo.rawPassword" type="password" show-password placeholder="确认密码">
                <template #prefix><i class="iconfont icon-password icon" /></template>
            </el-input>
            <div class="flex align-center row space-between" style="width: 100%">
                <el-input v-model="userInfo.authCode" style="width: 190px;" type="text" placeholder="验证码"></el-input>
                <el-button @click="sendEmail" :disabled="send" class="captcha_box " >{{tip}}{{time}}</el-button>
            </div>
            <el-button :disabled="!clickable" @click="signUp" style="width: 100%;border-radius: 15px;height: 45px;font-size: 16pt">注册</el-button>
            <div class="other_box">
                <router-link to="/signin">登录账号</router-link>
                <router-link to="/findpassword">忘记密码</router-link>
            </div>
        </div>
    </div>
</template>

<script>

import {sendEmailCaptcha} from "../api/auth";
import {signUp} from "../api/user";
import {ElMessage} from "element-plus";

export default {
    name: "SignUp",
    data(){
        return{
            userInfo:{
                email:'',
                name:'',
                password:'',
                rawPassword:'',
                authCode:'',
            },
            captchaInfo: {
                image:null,
                key:null,
            },
            time:null,
            send:false,
            tip:"发送验证码",
            clickable:true,
        }
    },
    methods:{
        signUp(){
            if (!this.validate())
                return;
            var head={
                'email-code':this.userInfo.authCode,
                'Content-Type':'application/json'
            }
            signUp(this.userInfo,head)
            .then(res=>{
                if (res.code===200){
                    ElMessage.success("注册成功")
                    this.$router.push("/signin")
                }else {
                    ElMessage.error(res.msg)
                }
            })
        },
        sendEmail(){
            if (!this.validateCode())
                return;
            const that=this
            this.time=30;
            this.send=true
            this.tip="验证码已发送"
            const temp=setInterval(()=>{
                that.time--;
                if(that.time===0){
                    that.time=null
                    that.send=false
                    clearInterval(temp)
                    that.tip="发送验证码"
                }
            },1000)
            sendEmailCaptcha(this.userInfo.email)
        },
        //验证输入合法
        validate(){
            var user=this.userInfo;
            if(!user.name)
                ElMessage.error("请输入用户名")
            else if (!user.email||!this.emailPattern(user.email))
                ElMessage.error("请输入正确的邮箱")
            else if (!user.password)
                ElMessage.error("请输入密码")
            else if(!user.rawPassword)
                ElMessage.error("请确认密码")
            else if (user.password!=user.rawPassword)
                ElMessage.error("密码不一致")
            else if (!user.authCode)
                ElMessage.error("请输入验证码")
            else return true;
            return false
        },
        validateCode(){
            var user=this.userInfo;
            if(!user.name)
                ElMessage.error("请输入用户名")
            else if (!user.email||!this.emailPattern(user.email))
                ElMessage.error("请输入正确的邮箱")
            else if (!user.password)
                ElMessage.error("请输入密码")
            else if(!user.rawPassword)
                ElMessage.error("请确认密码")
            else if (user.password!=user.rawPassword)
                ElMessage.error("密码不一致")
            else return true;
            return false
        },
        emailPattern(param){
            var pattern = /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/
            return pattern.test(param)
        }

    },
}
</script>

<style scoped>
.captcha_box{
    cursor: pointer;
    width: 190px;
    height: 43px;
    border-radius: 15px;
    border: 1px solid #c9c9c9;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #00C9A7;
    color: white;
    transition: all 0.4s ease 0s;
}
.captcha_box:hover{
    background: #02a98f;
    transform: scale(1.1);
    transition: all 0.4s ease 0s;
}
.captcha_box.is-disabled{
    background: #b4b3b6 !important;
    color: white;
}
.other_box{
    width: 100%;
//height: 90px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.icon{
    font-size: 17pt;
}
:deep(.el-input__inner) {
    height: 45px;
    font-size: 12pt;
    border-radius: 15px !important;
}
.login_box{
    width: 400px;
    height: 500px;
    background: #fff;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 40px 50px;
}
.login_main{
    height: calc(100vh - 180px);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-image: linear-gradient(to right top, #6d327c, #485DA6, #00a1ba, #00BF98, #36C486);

//background-image: linear-gradient(to right top, #38438b, #944b94, #d75a88, #ff7e71, #ffb25f, #ffeb68);

}
.web_name {
    min-width: 60px;
//width: 120px;
    text-decoration: none;
    color: #304455;
    cursor: pointer;
    display: flex;
    align-items: center;
    height: 100%;
    font-family: "STXingkai", "STXinwei", "STKaiti", "STLiti", "Xingkai SC", "KaiTi", "Microsoft Yahei", "SimSun", serif;
    font-size: 30px;
}
</style>
